<template>
  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
    <n-grid-item>
      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
        <n-space>
          <n-form-item label="邮箱" path="email">
            <n-input placeholder="请输入邮箱" v-model:value="formValue.email" />
          </n-form-item>

          <!-- Move the button to the right of the email input field -->
          <n-form-item>
            <n-button @click="getVerificationCode" :disabled="!formValue.email || countdown > 0">
              {{ countdown > 0 ? `${countdown}s 后重新获取` : '获取验证码' }}
            </n-button>
          </n-form-item>
        </n-space>

        <!-- Display verification code input field when needed -->
        <n-form-item v-if="showVerificationCode" label="验证码" path="code">
          <n-input placeholder="请输入验证码" v-model:value="formValue.code" />
        </n-form-item>

        <n-form-item label="密码" path="password">
          <n-input placeholder="请输入密码" v-model:value="formValue.password" />
        </n-form-item>

        <div>
          <n-space>
            <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
          </n-space>
        </div>
      </n-form>
    </n-grid-item>
  </n-grid>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useMessage } from 'naive-ui';
import { storage } from '@/utils/Storage';
import { CURRENT_USER } from '@/store/mutation-types';
import { changeEmail, emailVerify } from '@/api/system/role';
import { ResultEnum } from '@/enums/httpEnum';
import { useRouter } from 'vue-router';
  const rules = {
    code: {
      required: true,
      message: '请输入验证码',
    },
    email: {
      required: true,
      message: '请输入邮箱',
    },
    password: {
      required: true,
      message: '请输入联系电话',
    },
  };
  const router = useRouter();
  const formRef: any = ref(null);
  const message = useMessage();
  const formValue = reactive({
    code: '',
    password: '',
    email: '',
  });


  const showVerificationCode = ref(false);

  let countdown = ref(0);
  let countdownTimer;

  async function getVerificationCode() {
  if (formValue.email && countdown.value === 0) {
    showVerificationCode.value = true;
    startCountdown();

    const response = await changeEmail(formValue.email)
    if(response.code == ResultEnum.SUCCESS){
      message.success("验证码发送成功,请注意查收");
    }
  } else if (countdown.value > 0) {
    message.warning(`${countdown.value}s 后可重新获取验证码`);
  } else {
    message.warning('请输入邮箱');
  }
}


  function startCountdown() {
    countdown.value = 60;
    countdownTimer = setInterval(() => {
      countdown.value--;
      if (countdown.value === 0) {
        clearInterval(countdownTimer);
      }
    }, 1000);
  }

  function formSubmit() {
    formRef.value.validate(async (errors) => {
      if (!errors) {
        let current = storage.get(CURRENT_USER)
        current.mailName = formValue.email;
        current.password = formValue.password;
        console.log(current)

        const response = await emailVerify(current, formValue.code)
        if(response.code == ResultEnum.SUCCESS){
          message.success('修改成功');
          router.replace('/login?redirect=/dashboard');
        }
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }
</script>
